<template>
  <div class="case-management-container">
    <!-- 页面头部 -->
    <div class="header">
      <h1 class="page-title">测试用例管理</h1>
      <p class="header-description">统一管理所有测试用例，支持查询、编辑、评审和导出操作</p>
    </div>
    
    <!-- 查询条件区域 -->
    <div class="query-section">
      <el-card class="query-card">
        <el-form label-width="80px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="项目名称" class="query-form-item">
                <el-select v-model="selectedProjectId" placeholder="请选择项目" @change="onProjectChange" clearable>
                  <el-option
                    v-for="project in projects"
                    :key="project.id"
                    :label="project.name"
                    :value="project.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目版本" class="query-form-item">
                <el-select v-model="selectedVersionId" placeholder="请选择版本" @change="onVersionChange" clearable :disabled="!selectedProjectId">
                  <el-option
                    v-for="version in filteredVersions"
                    :key="version.id"
                    :label="version.version_number"
                    :value="version.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用例状态" class="query-form-item">
                <el-select v-model="filterStatus" placeholder="全部状态" clearable>
                  <el-option label="全部" value="" />
                  <el-option label="草稿" value="draft" />
                  <el-option label="评审中" value="reviewing" />
                  <el-option label="已评审" value="reviewed" />
                  <el-option label="已驳回" value="rejected" />
                  <el-option label="已废弃" value="deprecated" />
                  <el-option label="已废弃" value="obsolete" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="优先级" class="query-form-item">
                <el-select v-model="filterPriority" placeholder="全部优先级" clearable>
                  <el-option label="全部" value="" />
                  <el-option label="阻塞" value="blocker" />
                  <el-option label="严重" value="critical" />
                  <el-option label="高" value="high" />
                  <el-option label="中" value="medium" />
                  <el-option label="低" value="low" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="搜索" class="query-form-item">
                <el-input
                  v-model="searchKeyword"
                  placeholder="请输入用例ID、标题或模块进行搜索"
                  suffix-icon="Search"
                  @keyup.enter="queryCases"
                  class="search-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="text-align: right; padding-top: 10px;">
              <el-button type="primary" @click="queryCases" class="query-button">
                <el-icon><Search /></el-icon>
                查询
              </el-button>
              <el-button @click="resetQuery" class="reset-button">
                <el-icon><RefreshLeft /></el-icon>
                重置
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    
    <!-- 表格数据区域 -->
    <div class="table-section">
      <el-card class="data-table-card">
        <div class="table-header">
          <div class="table-actions">
            <el-button type="danger" @click="batchDeleteCases" :disabled="selectedCaseIds.length === 0" class="action-button danger-button">
              <el-icon><Delete /></el-icon>
              批量删除
              <span v-if="selectedCaseIds.length > 0" class="selected-count">({{ selectedCaseIds.length }})</span>
            </el-button>
            <el-tooltip content="导出Excel" placement="top">
              <el-button @click="exportExcel" :disabled="testCases.length === 0" class="icon-button export-icon-button">
                <el-icon><Document /></el-icon>
              </el-button>
            </el-tooltip>
          </div>
          <div class="table-stats">
            <span class="stat-info">共 <strong>{{ total }}</strong> 条数据</span>
            <span v-if="selectedProjectId" class="stat-info">| 项目：<strong>{{ getSelectedProjectName() }}</strong></span>
            <span v-if="selectedVersionId" class="stat-info">| 版本：<strong>{{ getSelectedVersionName() }}</strong></span>
          </div>
        </div>
        
        <el-table
          :data="testCases"
          style="width: 100%"
          v-loading="loading"
          border
          stripe
          highlight-current-row
          @selection-change="handleSelectionChange"
          class="data-table"
          row-class-name="table-row"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="case_id" label="用例ID" width="120" align="center" sortable />
          <el-table-column prop="title" label="用例标题" min-width="250" align="left">
            <template #default="scope">
              <div class="case-title">
                <span>{{ scope.row.title }}</span>
                <span v-if="['deprecated', 'obsolete'].includes(scope.row.status)" class="deprecated-badge">
                  <el-icon><Warning /></el-icon> 已废弃
                </span>
                <span v-if="scope.row.is_ai_generated" class="ai-generated-badge">
                  AI生成
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="module" label="所属模块" width="120" align="center" />
          <el-table-column prop="test_method" label="设计方法" width="120" align="center">
            <template #default="scope">
              <el-tag :type="getMethodTagType(scope.row.test_method)" class="method-tag">
                {{ getMethodDisplayName(scope.row.test_method) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="priority" label="优先级" width="90" align="center" sortable>
            <template #default="scope">
              <el-tag :type="getPriorityTagType(scope.row.priority)" class="priority-tag">
                {{ getPriorityDisplayName(scope.row.priority) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="90" align="center" sortable>
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)" class="status-tag">
                {{ getStatusDisplayName(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="steps" label="执行步骤" min-width="200" align="left">
            <template #default="scope">
              <el-popover
                placement="top"
                width="400"
                trigger="hover"
                :content="formatMultiLineText(scope.row.steps)"
              >
                <template #reference>
                  <span class="ellipsis-text">
                    {{ formatPreviewText(scope.row.steps) }}
                  </span>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="expected_result" label="预期结果" min-width="200" align="left">
            <template #default="scope">
              <el-popover
                placement="top"
                width="400"
                trigger="hover"
                :content="formatMultiLineText(scope.row.expected_result)"
              >
                <template #reference>
                  <span class="ellipsis-text">
                    {{ formatPreviewText(scope.row.expected_result) }}
                  </span>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="160" align="center" sortable>
            <template #default="scope">
              {{ formatTime(scope.row.created_at) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" align="center" fixed="right">
            <template #default="scope">
              <div class="action-buttons-group">
                <el-tooltip content="编辑用例" placement="top">
                  <el-button
                    type="primary"
                    size="small"
                    @click="editCase(scope.row)"
                    :disabled="scope.row.status !== 'draft'"
                    class="icon-button"
                  >
                    <el-icon><Edit /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="评审用例" placement="top">
                  <el-button
                    type="success"
                    size="small"
                    @click="reviewCase(scope.row)"
                    :disabled="scope.row.status !== 'draft'"
                    class="icon-button"
                  >
                    <el-icon><View /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="删除用例" placement="top">
                  <el-button
                    type="danger"
                    size="small"
                    @click="deleteCase(scope.row.id)"
                    class="icon-button"
                  >
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            page-sizes-text="条/页"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="custom-pagination"
          />
        </div>
      </el-card>
    </div>
    
    <!-- 编辑用例弹窗 -->
    <el-dialog 
      v-model="editDialogVisible" 
      title="编辑测试用例" 
      width="80%" 
      :close-on-click-modal="false"
      center
      class="custom-dialog"
    >
      <el-form ref="editFormRef" :model="editFormData" :rules="editFormRules" label-width="100px" class="dialog-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用例ID" prop="case_id" class="dialog-form-item">
              <el-input v-model="editFormData.case_id" placeholder="请输入用例ID" readonly class="readonly-input" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用例标题" prop="title" class="dialog-form-item">
              <el-input v-model="editFormData.title" placeholder="请输入用例标题" class="required-input" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="所属模块" prop="module" class="dialog-form-item">
          <el-input v-model="editFormData.module" placeholder="请输入所属模块" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用例设计方法" prop="test_method" class="dialog-form-item">
              <el-select v-model="editFormData.test_method" placeholder="请选择用例设计方法">
                  <el-option label="等价类" value="equivalence" />
                  <el-option label="边界值" value="boundary" />
                  <el-option label="判定表" value="decision_table" />
                  <el-option label="状态迁移" value="state_transition" />
                  <el-option label="用例设计" value="use_case" />
                  <el-option label="错误推测" value="error_guessing" />
                  <el-option label="场景" value="scenario" />
                  <el-option label="因果图" value="cause_effect" />
                  <el-option label="正交法" value="orthogonal" />
                  <el-option label="流程图法" value="flowchart" />
                  <el-option label="其他" value="other" />
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优先级" prop="priority" class="dialog-form-item">
              <el-select v-model="editFormData.priority" placeholder="请选择优先级">
                <el-option label="阻塞" value="blocker" />
                <el-option label="严重" value="critical" />
                <el-option label="高" value="high" />
                <el-option label="中" value="medium" />
                <el-option label="低" value="low" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="用例描述" prop="description" class="dialog-form-item">
          <el-input v-model="editFormData.description" type="textarea" :rows="3" placeholder="请输入用例描述" />
        </el-form-item>
        <el-form-item label="前置条件" prop="precondition" class="dialog-form-item">
          <el-input v-model="editFormData.precondition" type="textarea" :rows="3" placeholder="请输入前置条件" />
        </el-form-item>
        <el-form-item label="测试步骤" prop="steps" class="dialog-form-item">
          <el-input v-model="editFormData.steps" type="textarea" :rows="5" placeholder="请输入测试步骤，每行一个步骤" class="required-input" />
        </el-form-item>
        <el-form-item label="预期结果" prop="expected_result" class="dialog-form-item">
          <el-input v-model="editFormData.expected_result" type="textarea" :rows="4" placeholder="请输入预期结果" class="required-input" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelEdit" class="dialog-button">取消</el-button>
          <el-button type="primary" @click="saveEdit" class="dialog-button primary-button">确定</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 评审弹窗 -->
    <el-dialog 
      v-model="reviewDialogVisible" 
      title="评审测试用例" 
      width="60%" 
      :close-on-click-modal="false"
      center
      class="custom-dialog"
    >
      <div class="review-content">
        <div class="review-info">
          <div class="review-info-item">
            <span class="info-label">用例ID：</span>
            <span class="info-value">{{ reviewCaseData.case_id }}</span>
          </div>
          <div class="review-info-item">
            <span class="info-label">用例标题：</span>
            <span class="info-value">{{ reviewCaseData.title }}</span>
          </div>
        </div>
        <el-form ref="reviewFormRef" :model="reviewFormData" :rules="reviewFormRules" label-width="100px" class="dialog-form">
          <el-form-item label="评审结果" prop="is_approved" class="dialog-form-item">
            <el-radio-group v-model="reviewFormData.is_approved" class="review-radio-group">
              <el-radio :label="true" class="review-radio">
                <span class="radio-icon pass-icon">
                  <el-icon><Check /></el-icon>
                </span>
                <span>通过</span>
              </el-radio>
              <el-radio :label="false" class="review-radio">
                <span class="radio-icon reject-icon">
                  <el-icon><Close /></el-icon>
                </span>
                <span>不通过</span>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="评审意见" prop="review_comment" class="dialog-form-item">
            <el-input v-model="reviewFormData.review_comment" type="textarea" :rows="4" placeholder="请输入评审意见" />
          </el-form-item>
          <el-form-item label="评审人" prop="reviewer" class="dialog-form-item">
            <el-input v-model="reviewFormData.reviewer" placeholder="请输入评审人姓名" class="required-input" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelReview" class="dialog-button">取消</el-button>
          <el-button type="primary" @click="saveReview" class="dialog-button primary-button">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import request from '../utils/axios'
import { Search, RefreshLeft, Edit, Check, Delete, Document, Warning, Close, View } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElTooltip } from 'element-plus'

const route = useRoute()

// 状态定义
const projects = ref<Array<any>>([])
const versions = ref<Array<any>>([])
const testCases = ref<Array<any>>([])
const selectedProjectId = ref<string>('')
const selectedVersionId = ref<string>('')
const filterStatus = ref('')
const filterPriority = ref('')
const searchKeyword = ref('')
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const selectedCaseIds = ref<Array<string>>([])

// 获取选中的项目名称
const getSelectedProjectName = () => {
  const project = projects.value.find(p => p.id === selectedProjectId.value)
  return project ? project.name : ''
}

// 获取选中的版本名称
const getSelectedVersionName = () => {
  const version = versions.value.find(v => v.id === selectedVersionId.value)
  return version ? version.version_number : ''
}

// 弹窗状态
const editDialogVisible = ref(false)
const reviewDialogVisible = ref(false)

// 表单数据
const editFormData = ref({
  id: '',
  case_id: '',
  title: '',
  module: '',
  description: '',
  precondition: '',
  steps: '',
  expected_result: '',
  priority: 'medium',
  test_method: 'other'
})

const reviewCaseData = ref({
  id: '',
  case_id: '',
  title: ''
})

const reviewFormData = ref({
  is_approved: true,
  review_comment: '',
  reviewer: ''
})

// 表单验证规则
const editFormRules = {
  case_id: [{ required: true, message: '请输入用例ID', trigger: 'blur' }],
  title: [{ required: true, message: '请输入用例标题', trigger: 'blur' }],
  steps: [{ required: true, message: '请输入测试步骤', trigger: 'blur' }],
  expected_result: [{ required: true, message: '请输入预期结果', trigger: 'blur' }]
}

const reviewFormRules = {
  is_approved: [{ required: true, message: '请选择评审结果', trigger: 'change' }],
  reviewer: [{ required: true, message: '请输入评审人姓名', trigger: 'blur' }]
}

// 过滤后的版本列表（包含彻底去重处理）
const filteredVersions = computed(() => {
  // 使用Set对所有版本进行一次彻底去重
  const uniqueVersions = new Map()
  
  if (!selectedProjectId.value) {
    // 当未选择项目时，使用版本ID作为唯一键
    versions.value.forEach(version => {
      if (!uniqueVersions.has(version.id)) {
        uniqueVersions.set(version.id, version)
      }
    })
  } else {
    // 当选择项目时，过滤出该项目的版本，并使用版本ID作为唯一键
    versions.value.forEach(version => {
      if (version.project === selectedProjectId.value && !uniqueVersions.has(version.id)) {
        uniqueVersions.set(version.id, version)
      }
    })
  }
  
  // 将Map转为数组并按版本号排序
  const versionArray = Array.from(uniqueVersions.values())
  // 按版本号降序排序（这样最新版本会显示在最前面）
  versionArray.sort((a, b) => {
    // 简单的版本号比较，仅适用于X.Y.Z格式
    const aParts = a.version_number.split('.').map(Number)
    const bParts = b.version_number.split('.').map(Number)
    
    for (let i = 0; i < 3; i++) {
      if (aParts[i] !== bParts[i]) {
        return bParts[i] - aParts[i] // 降序
      }
    }
    return 0
  })
  
  return versionArray
})

// 从URL参数中获取默认值
const initFromUrlParams = () => {
  const projectId = route.query.projectId as string
  const versionId = route.query.versionId as string
  if (projectId) {
    selectedProjectId.value = projectId
  }
  if (versionId) {
    selectedVersionId.value = versionId
  }
}

// 获取项目列表
const fetchProjects = async () => {
  try {
    const response = await request.get('/api/projects/projects/')
    const results = response.data.results || []
    
    // 去重处理：使用Map存储唯一项目，以项目名称作为key
    const uniqueProjects = new Map()
    results.forEach((project: any) => {
      // 如果Map中不存在该项目名称，则添加
      if (!uniqueProjects.has(project.name)) {
        uniqueProjects.set(project.name, project)
      }
    })
    
    // 将Map的值转换为数组
    projects.value = Array.from(uniqueProjects.values())
  } catch (error) {
    console.error('获取项目列表失败:', error)
    ElMessage.error('获取项目列表失败')
  }
}

// 获取版本列表
const fetchVersions = async () => {
  try {
    const response = await request.get('/api/projects/versions/')
    const results = response.data.results || []
    
    // 去重处理：使用Map存储唯一版本，以版本ID作为key
    const uniqueVersions = new Map()
    results.forEach((version: any) => {
      // 如果Map中不存在该版本ID，则添加
      if (!uniqueVersions.has(version.id)) {
        uniqueVersions.set(version.id, version)
      }
    })
    
    // 将Map的值转换为数组
    versions.value = Array.from(uniqueVersions.values())
  } catch (error) {
    console.error('获取版本列表失败:', error)
    ElMessage.error('获取版本列表失败')
  }
}

// 查询测试用例
const queryCases = async () => {
  loading.value = true
  try {
    const params: any = {
      page: currentPage.value,
      page_size: pageSize.value
    }
    
    if (selectedVersionId.value) {
      params.version = selectedVersionId.value
    }
    
    if (filterStatus.value) {
      params.status = filterStatus.value
    }
    
    if (filterPriority.value) {
      params.priority = filterPriority.value
    }
    
    if (searchKeyword.value) {
      params.search = searchKeyword.value
    }
    
    const response = await request.get('/api/cases/test-cases/', {
      params
    })
    
    testCases.value = response.data.results || []
    total.value = response.data.count || 0
    selectedCaseIds.value = [] // 清空选择
    
    // 获取AI生成用例的标识
    try {
      const aiGeneratedResponse = await request.get('/api/ai/ai-services/get-ai-generated-cases/')
      const aiGeneratedCaseIds = aiGeneratedResponse.data.case_ids || []
      
      // 为每个用例添加is_ai_generated标识
      testCases.value = testCases.value.map((testCase: any) => ({
        ...testCase,
        is_ai_generated: aiGeneratedCaseIds.includes(testCase.id)
      }))
    } catch (error) {
      console.log('获取AI生成用例标识失败，使用默认值', error)
      // 如果获取失败，为每个用例添加默认标识
      testCases.value = testCases.value.map((testCase: any) => ({
        ...testCase,
        is_ai_generated: false
      }))
    }
  } catch (error) {
    console.error('查询测试用例失败:', error)
    ElMessage.error('查询测试用例失败')
  } finally {
    loading.value = false
  }
}

// 重置查询条件
const resetQuery = () => {
  filterStatus.value = ''
  filterPriority.value = ''
  searchKeyword.value = ''
  currentPage.value = 1
  queryCases()
}

// 切换项目时更新版本和清空版本选择
const onProjectChange = async () => {
  selectedVersionId.value = ''
  if (selectedProjectId.value) {
    // 重新查询版本列表，确保只加载当前项目的版本
    await fetchVersionsByProject(selectedProjectId.value)
    await nextTick()
    queryCases()
  } else {
    // 当未选择项目时，加载所有版本
    await fetchVersions()
  }
}

// 根据项目ID获取版本列表
const fetchVersionsByProject = async (projectId: string) => {
  try {
    const response = await request.get(`/api/projects/versions/?project=${projectId}`)
    const results = response.data.results || []
    
    // 去重处理：使用Map存储唯一版本，以版本ID作为key
    const uniqueVersions = new Map()
    results.forEach((version: any) => {
      if (!uniqueVersions.has(version.id)) {
        uniqueVersions.set(version.id, version)
      }
    })
    
    versions.value = Array.from(uniqueVersions.values())
  } catch (error) {
    console.error('获取项目版本列表失败:', error)
    ElMessage.error('获取项目版本列表失败')
  }
}

// 切换版本时重新查询用例
const onVersionChange = () => {
  currentPage.value = 1
  queryCases()
}

// 分页处理
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  queryCases()
}

const handleCurrentChange = (current: number) => {
  currentPage.value = current
  queryCases()
}

// 处理表格选择变化
const handleSelectionChange = (selection: Array<any>) => {
  selectedCaseIds.value = selection.map(item => item.id)
}

// 编辑用例
const editCase = (caseData: any) => {
  // 只允许编辑草稿状态的用例
  if (caseData.status !== 'draft') {
    ElMessage.warning('已评审的用例不可编辑！')
    return
  }
  
  // 复制用例数据到编辑表单
  editFormData.value = {
    id: caseData.id,
    case_id: caseData.case_id,
    title: caseData.title,
    module: caseData.module,
    description: caseData.description,
    precondition: caseData.precondition,
    steps: caseData.steps,
    expected_result: caseData.expected_result,
    priority: caseData.priority,
    test_method: caseData.test_method
  }
  
  editDialogVisible.value = true
}

// 保存编辑
const saveEdit = async () => {
  // 简单的表单验证
  if (!editFormData.value.title || !editFormData.value.steps || !editFormData.value.expected_result) {
    ElMessage.error('请填写必要的字段！')
    return
  }
  
  try {
    const data = {
      title: editFormData.value.title,
      module: editFormData.value.module,
      description: editFormData.value.description,
      precondition: editFormData.value.precondition,
      steps: editFormData.value.steps,
      expected_result: editFormData.value.expected_result,
      priority: editFormData.value.priority,
      test_method: editFormData.value.test_method
    }
    
    const response = await request.put(`/api/cases/test-cases/${editFormData.value.id}/`, data)
    
    if (response.status === 200) {
      ElMessage.success('用例编辑成功！')
      editDialogVisible.value = false
      queryCases() // 重新查询数据
    }
  } catch (error) {
    console.error('用例编辑失败:', error)
    ElMessage.error('用例编辑失败！')
  }
}

// 取消编辑
const cancelEdit = () => {
  editDialogVisible.value = false
}

// 评审用例
const reviewCase = (caseData: any) => {
  reviewCaseData.value = {
    id: caseData.id,
    case_id: caseData.case_id,
    title: caseData.title
  }
  
  reviewFormData.value = {
    is_approved: true,
    review_comment: '',
    reviewer: ''
  }
  
  reviewDialogVisible.value = true
}

// 保存评审结果
const saveReview = async () => {
  if (!reviewFormData.value.reviewer) {
    ElMessage.error('请输入评审人姓名！')
    return
  }
  
  try {
    const data = {
      is_approved: reviewFormData.value.is_approved,
      reviewed_by: reviewFormData.value.reviewer  // 修改参数名为后端期望的reviewed_by
    }
    
    // 发送评审请求
    const response = await request.post(`/api/cases/test-cases/${reviewCaseData.value.id}/review/`, data)
    
    // 记录响应内容以便调试
    console.log('评审响应:', response)
    
    // 基于HTTP状态码判断是否成功
    if (response && response.status >= 200 && response.status < 300) {
      // 确保使用正确的成功消息
      const successMessage = response.data && response.data.message ? response.data.message : '用例评审成功！'
      ElMessage.success(successMessage)
      reviewDialogVisible.value = false
      
      // 单独处理重新查询数据的逻辑，不影响评审成功的提示
      try {
        await queryCases()
      } catch (queryError) {
        // 查询失败不影响评审成功的状态，只在控制台输出错误信息
        console.error('重新查询测试用例失败:', queryError)
      }
    } else {
      // 处理其他情况
      console.error('用例评审失败，响应:', response)
      ElMessage.error('用例评审失败！')
    }
  } catch (error) {
    // 捕获更具体的错误信息
    console.error('用例评审失败:', error)
    
    // 处理不同类型的错误
    if (typeof error === 'object' && error !== null && 'response' in error) {
      // 服务器返回了错误响应
      const errorData = (error as any).response.data
      if (errorData.message && errorData.message.includes('已评审')) {
        ElMessage.warning('该用例已经评审过了！')
        reviewDialogVisible.value = false
      } else if (errorData.message) {
        ElMessage.error(errorData.message)
      } else if (errorData.detail && errorData.detail.includes('已评审')) {
        ElMessage.warning('该用例已经评审过了！')
        reviewDialogVisible.value = false
      } else if (errorData.detail) {
        ElMessage.error(errorData.detail)
      } else {
        ElMessage.error('用例评审失败！')
      }
    } else if (typeof error === 'object' && error !== null && 'message' in error) {
      const message = (error as Error).message
      if (message.includes('已评审')) {
        ElMessage.warning('该用例已经评审过了！')
        reviewDialogVisible.value = false
      } else {
        ElMessage.error('网络错误或服务器未响应，请稍后重试！')
      }
    } else {
      ElMessage.error('网络错误或服务器未响应，请稍后重试！')
    }
  }
}

// 取消评审
const cancelReview = () => {
  reviewDialogVisible.value = false
}

// 删除用例
const deleteCase = async (caseId: string) => {
  try {
    await ElMessageBox.confirm('确定要删除这个测试用例吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await request.delete(`/api/cases/test-cases/${caseId}/`)
    
    if (response.status === 204) {
      ElMessage.success('用例删除成功！')
      queryCases() // 重新查询数据
    }
  } catch (error) {
    // 用户取消操作时也会进入catch
    if (error !== 'cancel') {
      console.error('用例删除失败:', error)
      ElMessage.error('用例删除失败！')
    }
  }
}

// 批量删除用例
const batchDeleteCases = async () => {
  if (selectedCaseIds.value.length === 0) {
    ElMessage.warning('请选择要删除的用例！')
    return
  }
  
  try {
    await ElMessageBox.confirm(`确定要删除选中的 ${selectedCaseIds.value.length} 个测试用例吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await request.post('/api/cases/test-cases/batch-delete/', {
      case_ids: selectedCaseIds.value
    })
    
    if (response.status === 200) {
      ElMessage.success(`成功删除 ${selectedCaseIds.value.length} 个用例！`)
      queryCases() // 重新查询数据
    }
  } catch (error) {
    // 用户取消操作时也会进入catch
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败！')
    }
  }
}

// 导出Excel
const exportExcel = async () => {
  if (!selectedVersionId.value) {
    ElMessage.warning('请先选择版本！')
    return
  }
  
  try {
    const url = `/api/ai/ai-services/export-excel/?version_id=${selectedVersionId.value}`
    window.open(url, '_blank')
    ElMessage.success('Excel导出成功！')
  } catch (error) {
    console.error('Excel导出失败:', error)
    ElMessage.error('Excel导出失败！')
  }
}

// 获取状态显示名称 - 增强版，确保所有英文状态值都显示为中文
const getStatusDisplayName = (status: string) => {
  // 标准化状态值（去除空格和转换为小写）
  const normalizedStatus = status.trim().toLowerCase()
  
  const statusMap: Record<string, string> = {
    'draft': '草稿',
    'reviewing': '评审中',
    'reviewed': '已评审',
    'rejected': '已驳回',
    'obsolete': '已废弃',
    'deprecated': '已废弃', // 保持向后兼容
    'approved': '已评审', // 新增可能的英文状态值映射
    'passed': '已通过',    // 新增可能的英文状态值映射
    'fail': '失败'        // 新增可能的英文状态值映射
  }
  
  return statusMap[normalizedStatus] || (normalizedStatus.includes('pass') ? '已通过' : 
                                        normalizedStatus.includes('fail') ? '失败' : 
                                        normalizedStatus.includes('reject') ? '已驳回' : 
                                        normalizedStatus.includes('review') ? '评审中' : 
                                        normalizedStatus.includes('draft') ? '草稿' : 
                                        normalizedStatus.includes('obsolete') || normalizedStatus.includes('deprecated') ? '已废弃' : 
                                        status) // 如果没有匹配到，返回原始值
}

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  const typeMap: Record<string, string> = {
    'draft': 'warning',
    'reviewing': 'info',
    'reviewed': 'success',
    'rejected': 'danger',
    'obsolete': 'danger',
    'deprecated': 'danger' // 保持向后兼容
  }
  return typeMap[status] || 'default'
}

// 获取优先级显示名称 - 增强版，确保所有英文优先级都显示为中文
const getPriorityDisplayName = (priority: string) => {
  // 标准化优先级值
  const normalizedPriority = priority.trim().toLowerCase()
  
  const priorityMap: Record<string, string> = {
    'blocker': '阻塞',
    'critical': '严重',
    'high': '高',
    'medium': '中',
    'low': '低'
  }
  
  return priorityMap[normalizedPriority] || (normalizedPriority.includes('block') ? '阻塞' : 
                                           normalizedPriority.includes('critical') || normalizedPriority.includes('sever') ? '严重' : 
                                           normalizedPriority.includes('high') ? '高' : 
                                           normalizedPriority.includes('medium') || normalizedPriority.includes('mid') ? '中' : 
                                           normalizedPriority.includes('low') ? '低' : 
                                           priority) // 如果没有匹配到，返回原始值
}

// 获取优先级标签类型
const getPriorityTagType = (priority: string) => {
  const typeMap: Record<string, string> = {
    'blocker': 'danger',
    'critical': 'warning',
    'high': 'info',
    'medium': 'primary',
    'low': 'success'
  }
  return typeMap[priority] || 'default'
}

// 获取用例设计方法显示名称 - 增强版，确保所有英文方法名都显示为中文
const getMethodDisplayName = (method: string) => {
  // 标准化方法名
  const normalizedMethod = method.trim().toLowerCase()
  
  const methodMap: Record<string, string> = {
    'equivalence': '等价类',
    'boundary': '边界值',
    'decision_table': '判定表',
    'state_transition': '状态迁移',
    'use_case': '用例设计',
    'error_guessing': '错误推测',
    'scenario': '场景',
    'cause_effect': '因果图',
    'orthogonal': '正交法',
    'flowchart': '流程图法',
    'usability': '可用性测试',
    'functional': '功能测试',
    'security': '安全性测试',
    'compatibility': '兼容性测试',
    'other': '其他',
    'performance': '性能测试', // 从populate_sample_data.py中发现的方法名
    'automated': '自动化测试', // 补充可能的方法名
    'manual': '手工测试'      // 补充可能的方法名
  }
  
  return methodMap[normalizedMethod] || (normalizedMethod.includes('equivalence') ? '等价类' : 
                                       normalizedMethod.includes('boundary') ? '边界值' : 
                                       normalizedMethod.includes('decision') ? '判定表' : 
                                       normalizedMethod.includes('state') ? '状态迁移' : 
                                       normalizedMethod.includes('use') ? '用例设计' : 
                                       normalizedMethod.includes('error') ? '错误推测' : 
                                       normalizedMethod.includes('scenario') ? '场景' : 
                                       normalizedMethod.includes('orthogonal') ? '正交法' : 
                                       normalizedMethod.includes('flow') ? '流程图法' : 
                                       normalizedMethod.includes('usab') ? '可用性测试' : 
                                       normalizedMethod.includes('function') ? '功能测试' : 
                                       normalizedMethod.includes('secur') ? '安全性测试' : 
                                       normalizedMethod.includes('compat') ? '兼容性测试' : 
                                       normalizedMethod.includes('perform') ? '性能测试' : 
                                       normalizedMethod.includes('auto') ? '自动化测试' : 
                                       normalizedMethod.includes('manu') ? '手工测试' : 
                                       '其他') // 默认显示为'其他'
}

// 获取用例设计方法标签类型
const getMethodTagType = (method: string) => {
  const typeMap: Record<string, string> = {
    'equivalence': 'primary',
    'boundary': 'success',
    'decision_table': 'warning',
    'state_transition': 'info',
    'use_case': 'danger',
    'error_guessing': 'purple',
    'scenario': 'blue',
    'cause_effect': 'cyan',
    'orthogonal': 'magenta',
    'flowchart': 'olive',
    'usability': 'indigo',
    'functional': 'teal',
    'security': 'amber',
    'compatibility': 'purple',
    'other': 'default'
  }
  return typeMap[method] || 'default'
}

// 格式化时间，去掉毫秒部分
const formatTime = (timeString: string) => {
  if (!timeString) return ''
  try {
    const date = new Date(timeString)
    // 格式化成年-月-日 时:分:秒格式，去掉毫秒
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
  } catch (error) {
    console.error('时间格式化失败:', error)
    return timeString // 如果格式化失败，返回原始字符串
  }
}

// 格式化多行文本，用于popover显示
const formatMultiLineText = (text: string) => {
  if (!text) return '无'
  return text.split('\n').filter(line => line.trim()).join('\n')
}

// 格式化预览文本，用于表格单元格显示
const formatPreviewText = (text: string) => {
  if (!text) return '无'
  const firstLine = text.split('\n')[0] || ''
  if (firstLine.length > 30) {
    return firstLine.substring(0, 30) + '...'
  }
  return firstLine
}

// 初始化数据
onMounted(() => {
  initFromUrlParams()
  fetchProjects()
  
  // 如果从URL参数中获取了项目ID，则加载该项目的版本
  if (selectedProjectId.value) {
    fetchVersionsByProject(selectedProjectId.value)
  } else {
    // 否则加载所有版本
    fetchVersions()
  }
  
  // 等待DOM更新后再查询数据
  nextTick(() => {
    // 无论是否有选择版本，都查询测试用例数据
    queryCases()
  })
})
</script>

<style scoped>
/* 基础容器样式 */
.case-management-container {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  background-color: #f9fafb;
  min-height: 100vh;
}

/* 页面头部样式 */
.header {
  margin-bottom: 32px;
  text-align: center;
}

/* 统一标题样式已在全局style.css中定义，但保留居中效果 */
.header .page-title {
  text-align: center;
}

.header-description {
  font-size: 14px;
  color: #6b7280;
  margin-top: 12px;
}

/* 查询条件区域样式 */
.query-section {
  margin-bottom: 24px;
}

.query-card {
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: none;
  padding: 24px;
  background-color: white;
  transition: all 0.3s ease;
}

.query-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.query-form-item {
  margin-bottom: 20px;
}

.search-input {
  transition: all 0.3s ease;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  height: 40px;
}

.search-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
  outline: none;
}

.query-button,
.reset-button {
  transition: all 0.3s ease;
  min-width: 96px;
  height: 40px;
  border-radius: 8px;
  font-weight: 500;
}

.query-button {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
  color: white;
}

.query-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.reset-button {
  background-color: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e2e8f0;
}

.reset-button:hover {
  background-color: #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 表格数据区域样式 */
.table-section {
  margin-bottom: 24px;
}

.data-table-card {
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: none;
  overflow: hidden;
  background-color: white;
  transition: all 0.3s ease;
}

.data-table-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.table-header {
  padding: 24px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.table-actions {
  display: flex;
  gap: 16px;
}

.action-button {
  transition: all 0.3s ease;
  min-width: 120px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
}

/* 图标按钮样式 - 无边框、仅图标 */
.icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  min-width: unset;
  border: none !important;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 导出图标按钮特殊样式 */
.export-icon-button {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.export-icon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.danger-button {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.danger-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.export-button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.export-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.selected-count {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 12px;
  margin-left: 8px;
  backdrop-filter: blur(4px);
}

.table-stats {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 14px;
  color: #6b7280;
}

.stat-info strong {
  color: #1f2937;
  font-weight: 600;
}

/* 表格样式 - 现代化设计 */
.data-table {
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

/* 表头样式增强 - 现代渐变设计 */
.data-table .el-table__header {
  background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%) !important;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.data-table .el-table__header-wrapper .el-table__header th {
  background: transparent !important;
  color: white !important;
  font-weight: 600 !important;
  text-align: center !important;
  border: none !important;
  padding: 18px 12px !important;
  position: relative;
  overflow: hidden;
}

.data-table .el-table__header-wrapper .el-table__header th::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 30%;
  background-color: rgba(255, 255, 255, 0.2);
}

.data-table .el-table__header-wrapper .el-table__header th:last-child::after {
  display: none;
}

.data-table .el-table__header-wrapper .el-table__header th:first-child {
  border-radius: 12px 0 0 0 !important;
}

.data-table .el-table__header-wrapper .el-table__header th:last-child {
  border-radius: 0 12px 0 0 !important;
}

/* 表头排序图标 */
.data-table .el-table__sort-icon {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 表格行样式优化 - 现代卡片式设计 */
.data-table .el-table__body-wrapper .el-table__body {
  background-color: #f8fafc;
}

.data-table .el-table__body-wrapper .el-table__body .table-row {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 72px;
  background-color: white;
  margin-bottom: 8px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.data-table .el-table__body-wrapper .el-table__body .table-row:hover {
  background-color: #f0f9ff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
  z-index: 5;
}

.data-table .el-table__body-wrapper .el-table__body td {
  padding: 16px !important;
  border-bottom: none !important;
  text-align: center !important;
  background-color: transparent !important;
}

/* 用例标题样式 - 增强视觉层次 */
.case-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.5;
  font-size: 14px;
}

.deprecated-badge {
  background-color: #fef3c7;
  color: #92400e;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

.ai-generated-badge {
  background-color: #eff6ff;
  color: #1e40af;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 40px;
  font-weight: 500;
  border: 1px solid #c7d2fe;
  white-space: nowrap;
}

/* 标签样式优化 - 现代徽章设计 */
.method-tag,
.priority-tag,
.status-tag {
  font-size: 12px;
  padding: 8px 18px !important;
  border-radius: 20px !important;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}

/* 文本截断样式 */
.ellipsis-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.method-tag:hover,
.priority-tag:hover,
.status-tag:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 优先级标签增强 - 添加彩色指示器和渐变 */
.priority-tag {
  position: relative;
  overflow: hidden;
}

.priority-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: 20px 0 0 20px;
}

/* 优先级标签颜色映射 */
.priority-tag[effect="dark"][type="danger"]::before {
  background-color: #ef4444;
}

.priority-tag[effect="dark"][type="warning"]::before {
  background-color: #f59e0b;
}

.priority-tag[effect="dark"][type="primary"]::before {
  background-color: #3b82f6;
}

.priority-tag[effect="dark"][type="success"]::before {
  background-color: #10b981;
}

.priority-tag[effect="dark"][type="info"]::before {
  background-color: #64748b;
}

/* 操作按钮组样式优化 - 现代按钮设计 */
.action-buttons-group {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.table-action-button {
  padding: 8px 16px !important;
  font-size: 12px;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  border: none !important;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

/* 操作按钮渐变色 */
.table-action-button[type="primary"] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: white !important;
}

.table-action-button[type="success"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white !important;
}

.table-action-button[type="danger"] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: white !important;
}

.table-action-button:hover:not(:disabled) {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

.table-action-button:active:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
}

.table-action-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 动画效果 - 增强微交互 */
@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 1px 3px rgba(146, 64, 14, 0.1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(146, 64, 14, 0.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 1px 3px rgba(146, 64, 14, 0.1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 奇偶行差异化样式 - 现代卡片感 */
.data-table .el-table__body tr.el-table__row--striped .table-row {
  background-color: #fafafa !important;
}

.data-table .el-table__body tr.el-table__row--striped .table-row:hover {
  background-color: #f0f9ff !important;
}

/* 选中行样式 */
.data-table .el-table__body tr.current-row .table-row {
  background-color: #eff6ff !important;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.15) !important;
}

/* 分页样式 - 现代简约设计 */
.pagination-container {
  padding: 24px;
  display: flex;
  justify-content: flex-end;
  background-color: white;
  border-top: 1px solid #f1f5f9;
  border-radius: 0 0 16px 16px;
}

.custom-pagination .el-pager li {
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 8px;
  margin: 0 4px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.custom-pagination .el-pager li:hover:not(.active) {
  color: #3b82f6;
  background-color: #eff6ff;
  transform: translateY(-1px);
}

.custom-pagination .el-pager li.active {
  background-color: #3b82f6;
  color: white;
  border-radius: 8px;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* 分页控件按钮 */
.custom-pagination .el-pagination__prev,
.custom-pagination .el-pagination__next,
.custom-pagination .el-pagination__jump-prev,
.custom-pagination .el-pagination__jump-next {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.custom-pagination .el-pagination__prev:hover:not(.is-disabled),
.custom-pagination .el-pagination__next:hover:not(.is-disabled),
.custom-pagination .el-pagination__jump-prev:hover:not(.is-disabled),
.custom-pagination .el-pagination__jump-next:hover:not(.is-disabled) {
  background-color: #eff6ff;
  color: #3b82f6;
  transform: translateY(-1px);
}

/* 弹窗样式 - 现代模态框设计 */
.custom-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.custom-dialog .el-dialog__header {
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 24px 24px;
}

.custom-dialog .el-dialog__title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.dialog-form {
  padding: 24px;
}

.dialog-form-item {
  margin-bottom: 24px;
}

.dialog-form-item .el-form-item__label {
  font-weight: 500;
  color: #4b5563;
}

.readonly-input {
  background-color: #f8fafc;
  cursor: not-allowed;
  color: #9ca3af;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.required-input::placeholder {
  color: #f87171;
  font-style: italic;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid #e2e8f0;
  background-color: #f8fafc;
}

.dialog-button {
  min-width: 90px;
  height: 40px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.dialog-button:not(.primary-button) {
  background-color: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e2e8f0;
}

.dialog-button:not(.primary-button):hover {
  background-color: #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.primary-button {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
}

.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

/* 评审弹窗样式 */
.review-content {
  padding: 0;
}

.review-info {
  padding: 20px 24px;
  background-color: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
}

.review-info-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.review-info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  color: #6b7280;
  font-size: 14px;
  min-width: 80px;
}

.info-value {
  color: #1f2937;
  font-weight: 500;
  font-size: 14px;
}

.review-radio-group {
  display: flex;
  gap: 24px;
}

.review-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.review-radio:hover {
  background-color: #f3f4f6;
}

.radio-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.pass-icon {
  background-color: #d1fae5;
  color: #047857;
}

.reject-icon {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .case-management-container {
    padding: 20px;
  }
  
  .table-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .table-stats {
    width: 100%;
    justify-content: space-between;
  }
}

@media screen and (max-width: 768px) {
  .case-management-container {
    padding: 16px;
  }
  
  .header h1 {
    font-size: 24px;
  }
  
  .header-description {
    font-size: 13px;
  }
  
  .query-card {
    padding: 16px;
  }
  
  .table-header {
    padding: 16px 16px 0;
  }
  
  .table-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .action-button {
    width: 100%;
  }
  
  .data-table {
    font-size: 13px;
  }
  
  .action-buttons-group {
    flex-direction: column;
  }
  
  .table-action-button {
    width: 100%;
  }
  
  .pagination-container {
    padding: 16px;
    justify-content: center;
  }
  
  .custom-dialog {
    width: 90% !important;
  }
  
  .dialog-form {
    padding: 16px;
  }
  
  .review-radio-group {
    flex-direction: column;
    gap: 12px;
  }
}

@media screen and (max-width: 480px) {
  .header h1 {
    font-size: 20px;
  }
  
  .case-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .table-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .dialog-footer {
    flex-direction: column;
  }
  
  .dialog-button {
    width: 100%;
  }
}
</style>